<template>
  <div class="mod-config">
    <el-select @change="calligraphyChange" v-model="calligraphyType" placeholder="请选择">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
    </el-select>
    <el-button type="primary" @click="getBasisStrokesList();">查询</el-button>
    <el-button type="primary" @click="addBasisStrokesTitle();">添加标题</el-button>
        <el-table
        :data="tableBasisStrokesData"
        border
        row-key="id"
        :expand-row-keys="expands"
        @expand-change="toggleRowExpansion"
        style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
            <el-table
                :data="props.row.datas"
                style="width: 100%">
                <el-table-column
                label="图片id"
                prop="id">
                </el-table-column>
                <el-table-column
                label="名称"
                prop="strokesName">
                </el-table-column>
                <el-table-column
                label="顺序"
                width="80"
                prop="porder">
                </el-table-column>
                <el-table-column
                width="400"
                label="操作">
                <template slot-scope="scope">
                    <el-button
                    type="text"
                    size="small"
                    @click="updateBasisStrokesPic(scope.row.id,scope.row.strokesName,scope.row.porder,scope.row.calligraphyPicture,scope.row.expandPicture,scope.row.expandVideo,scope.row.expandPicture2,scope.row.expandVideo2,scope.row.expandPicture3,scope.row.expandVideo3,scope.row.expandPicture4,scope.row.expandVideo4,scope.row.cid)"
                    >修改</el-button
                    >
                    <el-button
                    type="text"
                    size="small"
                    @click="deleteBasisStrokesPic(scope.row.id)"
                    >删除</el-button
                    >
                </template>
                </el-table-column>
            </el-table>
            </template>
        </el-table-column>
        <el-table-column
            prop="id"
            label="id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="strokesTitle"
            label="标题"
            width="180">
        </el-table-column>
        <el-table-column
            prop="corder"
            label="顺序">
        </el-table-column>
        <el-table-column
            label="操作">
            <template slot-scope="scope">
            <el-button
                type="text"
                size="small"
                @click="updateBasisStroke(scope.row.id,scope.row.strokesTitle,scope.row.corder)"
                >修改</el-button
            >
            <el-button
                type="text"
                size="small"
                @click="deleteBasisStroke(scope.row.id)"
                >删除</el-button
            >
            <el-button
                type="text"
                size="small"
                @click="addBasisStrokePic(scope.row.id)"
                >添加书法基础图片</el-button
            >
            </template>
        </el-table-column>
        </el-table>
        <el-dialog title="添加基本笔画标题" :visible.sync="dialogBasisStrokeTitleFormVisible" :before-close="handleBasisStrokeTitleClose">
        <el-form ref="basisstroketitleform" :rules="dataRule4" :model="basisstroketitleform" label-width="120px" class="demo-ruleForm">
            <el-form-item label="笔画标题："
            prop="strokesTitle">
            <el-input
                type="strokesTitle"
                placeholder="请输入内容"
                v-model="basisstroketitleform.strokesTitle"
                style="width: 50%"
                clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="笔画标题顺序："
            prop="corder">
            <el-input-number v-model="basisstroketitleform.corder" controls-position="right" :min="0"></el-input-number>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="insertUpdateBasisStrokeTitle();">保 存</el-button>
        </div>
        </el-dialog>

        <el-dialog :title="calligraphyPicTitle" :visible.sync="dialogBasisStrokePicFormVisible" :before-close="handleBasisStrokePicClose">
        <el-form ref="basisstrokepicform" :rules="dataRule5" :model="basisstrokepicform" label-width="120px" class="demo-ruleForm">
            <el-form-item label="笔画名称："
            prop="strokesName">
            <el-input
                type="strokesName"
                placeholder="请输入内容"
                v-model="basisstrokepicform.strokesName"
                style="width: 50%"
                clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="顺序："
            prop="porder">
            <el-input-number v-model="basisstrokepicform.porder" controls-position="right" :min="0"></el-input-number>
            </el-form-item>
            <el-form-item label="书法基础图片："
            prop="calligraphyPicture">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleBasisStrokePicAvatarSuccess1"
            :auto-upload="true"
            :show-file-list="false">
                <img v-if="basisstrokepicform.calligraphyPicture" :src="basisstrokepicform.calligraphyPicture" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展图片1："
            prop="expandPicture">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleBasisStrokePicAvatarSuccess2"
            :auto-upload="true"
            :show-file-list="false">
                <img v-if="basisstrokepicform.expandPicture" :src="basisstrokepicform.expandPicture" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展视频1：" prop="expandVideo">
            <el-upload
                :on-success="handleUploadExpandVideoSuccess"
                :on-remove="handleUploadExpandVideoRemove"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileExpandVideoList"
                :before-upload="beforeVideoUpload"
                :action="'http://121.41.167.195:8000/api/oss/upload'"
                :limit="1"
                class="upload-demo"
            >
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                <div slot="content">
                    最大支持1G，<br />
                    支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
                </el-tooltip>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展图片2："
            prop="expandPicture2">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleBasisStrokePicAvatarSuccess22"
            :auto-upload="true"
            :show-file-list="false">
                <img v-if="basisstrokepicform.expandPicture2" :src="basisstrokepicform.expandPicture2" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展视频2：" prop="expandVideo2">
            <el-upload
                :on-success="handleUploadExpandVideoSuccess2"
                :on-remove="handleUploadExpandVideoRemove2"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileExpandVideoList2"
                :before-upload="beforeVideoUpload"
                :action="'http://121.41.167.195:8000/api/oss/upload'"
                :limit="1"
                class="upload-demo"
            >
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                <div slot="content">
                    最大支持1G，<br />
                    支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
                </el-tooltip>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展图片3："
            prop="expandPicture3">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleBasisStrokePicAvatarSuccess23"
            :auto-upload="true"
            :show-file-list="false">
                <img v-if="basisstrokepicform.expandPicture3" :src="basisstrokepicform.expandPicture3" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展视频3：" prop="expandVideo3">
            <el-upload
                :on-success="handleUploadExpandVideoSuccess3"
                :on-remove="handleUploadExpandVideoRemove3"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileExpandVideoList3"
                :before-upload="beforeVideoUpload"
                :action="'http://121.41.167.195:8000/api/oss/upload'"
                :limit="1"
                class="upload-demo"
            >
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                <div slot="content">
                    最大支持1G，<br />
                    支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
                </el-tooltip>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展图片4："
            prop="expandPicture4">
            <el-upload 
            class="avatar-uploader" 
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :on-success="handleBasisStrokePicAvatarSuccess24"
            :auto-upload="true"
            :show-file-list="false">
                <img v-if="basisstrokepicform.expandPicture4" :src="basisstrokepicform.expandPicture4" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            </el-form-item>
            <el-form-item label="扩展视频4：" prop="expandVideo4">
            <el-upload
                :on-success="handleUploadExpandVideoSuccess4"
                :on-remove="handleUploadExpandVideoRemove4"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileExpandVideoList4"
                :before-upload="beforeVideoUpload"
                :action="'http://121.41.167.195:8000/api/oss/upload'"
                :limit="1"
                class="upload-demo"
            >
                <el-button size="small" type="primary">上传视频</el-button>
                <el-tooltip placement="right-end">
                <div slot="content">
                    最大支持1G，<br />
                    支持FLV、MP4视频格式上传
                </div>
                <i class="el-icon-question" />
                </el-tooltip>
            </el-upload>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="insertUpdateBasisStrokePic();">保 存</el-button>
        </div>
        </el-dialog>

  </div>
</template>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<script>
export default {
  data() {
    return {
      expands: [],
      expandsinner: [],
      calligraphyType: 1,
      tableBasisStrokesData: [],
      basisstroketitleform: {
        strokesTitle: '',
        corder: '',
        updateId: '',
      },
      options: [{
          value: 1,
          label: '基本笔画'
        }, {
          value: 2,
          label: '偏旁部首'
        }, {
          value: 3,
          label: '结构形式'
        }],
      dataRule4: {
        // 数据规则
        strokesTitle: [{ required: true, message: "基本笔画标题不能为空" }],
        corder: [{ required: true, message: "基本笔画顺序不能为空" }],
      },
      dataRule5: {
        // 数据规则
        strokesName: [{ required: true, message: "基本笔画标题不能为空" }],
        porder: [{ required: true, message: "基本笔画顺序不能为空" }],
        calligraphyPicture: [{ required: true, message: "书法基础图片不能为空" }],
        expandPicture: [{ required: true, message: "扩展图片1不能为空" }],
        expandPicture2: [{ required: true, message: "扩展图片2不能为空" }],
        expandPicture3: [{ required: true, message: "扩展图片3不能为空" }],
        expandPicture4: [{ required: true, message: "扩展图片4不能为空" }],
      },
      calligraphyTitle: '基本笔画',
      calligraphyPicTitle: '基本笔画图片信息',
      dialogBasisStrokeTitleFormVisible: false,
      dialogBasisStrokePicFormVisible: false,
      basisstrokepicform: {
        cid: '',
        strokesName: '',
        porder: '',
        calligraphyPicture: '',
        expandPicture: '',
        expandVideo: '',
        expandPicture2: '',
        expandVideo2: '',
        expandPicture3: '',
        expandVideo3: '',
        expandPicture4: '',
        expandVideo4: '',
        updateId: '',
      },
      fileExpandVideoList: [],
      fileExpandVideoList2: [],
      fileExpandVideoList3: [],
      fileExpandVideoList4: [],
    };
  },
  components: {},
  activated() {
      this.getBasisStrokesList();
  },
  methods: {
    toggleRowExpansion(row,expanded){
      this.expands = [];
      this.expands = expanded.map((item,i) =>{return item.id});//展开当前行的信息
    },
    //打开添加书法基础图片模态框
    addBasisStrokePic(id){
      this.basisstrokepicform.cid = id;
      this.dialogBasisStrokePicFormVisible = true;
    },
    beforeVideoUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".mp4" && fileType !== ".flv") {
        this.$message.error("上传视频频只能是mp4/flv!");
        return false;
      }
      return true;
    },
    // 视图上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning("想要重新上传视(音)频，请先删除已上传的视(音)频");
    },
    // 删除之前，就是点击x的时候
    beforeVodRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 点击确定的时候进行彻底删除
    handleUploadExpandVideoRemove() {
      this.basisstrokepicform.expandVideo = "";
      this.fileExpandVideoList = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadExpandVideoRemove2() {
      this.basisstrokepicform.expandVideo2 = "";
      this.fileExpandVideoList2 = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadExpandVideoRemove3() {
      this.basisstrokepicform.expandVideo3 = "";
      this.fileExpandVideoList3 = [];
    },
    // 点击确定的时候进行彻底删除
    handleUploadExpandVideoRemove4() {
      this.basisstrokepicform.expandVideo4 = "";
      this.fileExpandVideoList4 = [];
    },
    // 扩展视频上传成功回调
    handleUploadExpandVideoSuccess(response, file, fileList) {
      this.basisstrokepicform.expandVideo = response.url;
    },
    // 扩展视频上传成功回调
    handleUploadExpandVideoSuccess2(response, file, fileList) {
      this.basisstrokepicform.expandVideo2 = response.url;
    },
    // 扩展视频上传成功回调
    handleUploadExpandVideoSuccess3(response, file, fileList) {
      this.basisstrokepicform.expandVideo3 = response.url;
    },
    // 扩展视频上传成功回调
    handleUploadExpandVideoSuccess4(response, file, fileList) {
      this.basisstrokepicform.expandVideo4 = response.url;
    },
    // 扩展上传成功回调函数
    handleBasisStrokePicAvatarSuccess2(response){
      this.basisstrokepicform.expandPicture = response.url;
    },
    // 扩展上传成功回调函数
    handleBasisStrokePicAvatarSuccess22(response){
      this.basisstrokepicform.expandPicture2 = response.url;
    },
    // 扩展上传成功回调函数
    handleBasisStrokePicAvatarSuccess23(response){
      this.basisstrokepicform.expandPicture3 = response.url;
    },
    // 扩展上传成功回调函数
    handleBasisStrokePicAvatarSuccess24(response){
      this.basisstrokepicform.expandPicture4 = response.url;
    },
    // 书法基础图片上传成功回调函数
    handleBasisStrokePicAvatarSuccess1(response){
      this.basisstrokepicform.calligraphyPicture = response.url;
    },
    // 关闭添加基本笔法图片模态框
    handleBasisStrokePicClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          this.basisstrokepicform.cid = '';
          this.basisstrokepicform.strokesName = '';
          this.basisstrokepicform.porder = '';
          this.basisstrokepicform.calligraphyPicture = '';
          this.basisstrokepicform.expandPicture = '';
          this.basisstrokepicform.expandVideo = '';
          this.basisstrokepicform.expandPicture2 = '';
          this.basisstrokepicform.expandVideo2 = '';
          this.basisstrokepicform.expandPicture3 = '';
          this.basisstrokepicform.expandVideo3 = '';
          this.basisstrokepicform.expandPicture4 = '';
          this.basisstrokepicform.expandVideo4 = '';
          this.basisstrokepicform.updateId = '';
          this.fileExpandVideoList = [];
          this.fileExpandVideoList2 = [];
          this.fileExpandVideoList3 = [];
          this.fileExpandVideoList4 = [];
          done();
        })
        .catch(_ => {});
    },
    //关闭添加基本笔法标题模态框
    handleBasisStrokeTitleClose(done){
      this.$confirm('确认关闭？')
        .then(_ => {
          this.basisstroketitleform.strokesTitle = '';
          this.basisstroketitleform.corder = '';
          this.basisstroketitleform.updateId = '';
          done();
        })
        .catch(_ => {});
    },
    // 更新或插入添加书法基础图片信息数据
    insertUpdateBasisStrokePic(){
      this.$refs["basisstrokepicform"].validate((valid) => {
        if (valid) {
          if(this.basisstrokepicform.updateId == ''){
            //插入添加书法基础图片信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffcalligraphypicture/save"),
              method: "post",
              data: this.$http.adornParams({
                cid: this.basisstrokepicform.cid,
                strokesName: this.basisstrokepicform.strokesName,
                porder: this.basisstrokepicform.porder,
                calligraphyPicture: this.basisstrokepicform.calligraphyPicture,
                expandPicture: this.basisstrokepicform.expandPicture,
                expandVideo: this.basisstrokepicform.expandVideo,
                expandPicture2: this.basisstrokepicform.expandPicture2,
                expandVideo2: this.basisstrokepicform.expandVideo2,
                expandPicture3: this.basisstrokepicform.expandPicture3,
                expandVideo3: this.basisstrokepicform.expandVideo3,
                expandPicture4: this.basisstrokepicform.expandPicture4,
                expandVideo4: this.basisstrokepicform.expandVideo4,
              }),
            }).then(({ data }) => {
              this.basisstrokepicform.cid = '';
              this.basisstrokepicform.strokesName = '';
              this.basisstrokepicform.porder = '';
              this.basisstrokepicform.calligraphyPicture = '';
              this.basisstrokepicform.expandPicture = '';
              this.basisstrokepicform.expandVideo = '';
              this.fileExpandVideoList = [];
              this.basisstrokepicform.expandPicture2 = '';
              this.basisstrokepicform.expandVideo2 = '';
              this.fileExpandVideoList2 = [];
              this.basisstrokepicform.expandPicture3 = '';
              this.basisstrokepicform.expandVideo3 = '';
              this.fileExpandVideoList3 = [];
              this.basisstrokepicform.expandPicture4 = '';
              this.basisstrokepicform.expandVideo4 = '';
              this.fileExpandVideoList4 = [];
              this.dialogBasisStrokePicFormVisible = false;
              this.$message({
                message: '添加成功!',
                type: 'success'
              });
            });
          }else{
            //更新添加书法基础图片信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffcalligraphypicture/update"),
              method: "post",
              data: this.$http.adornParams({
                cid: this.basisstrokepicform.cid,
                strokesName: this.basisstrokepicform.strokesName,
                porder: this.basisstrokepicform.porder,
                calligraphyPicture: this.basisstrokepicform.calligraphyPicture,
                expandPicture: this.basisstrokepicform.expandPicture,
                expandVideo: this.basisstrokepicform.expandVideo,
                expandPicture2: this.basisstrokepicform.expandPicture2,
                expandVideo2: this.basisstrokepicform.expandVideo2,
                expandPicture3: this.basisstrokepicform.expandPicture3,
                expandVideo3: this.basisstrokepicform.expandVideo3,
                expandPicture4: this.basisstrokepicform.expandPicture4,
                expandVideo4: this.basisstrokepicform.expandVideo4,
                id: this.basisstrokepicform.updateId,
              }),
            }).then(({ data }) => {
              this.basisstrokepicform.cid = '';
              this.basisstrokepicform.strokesName = '';
              this.basisstrokepicform.porder = '';
              this.basisstrokepicform.calligraphyPicture = '';
              this.basisstrokepicform.expandPicture = '';
              this.basisstrokepicform.expandVideo = '';
              this.fileExpandVideoList = [];
              this.basisstrokepicform.expandPicture2 = '';
              this.basisstrokepicform.expandVideo2 = '';
              this.fileExpandVideoList2 = [];
              this.basisstrokepicform.expandPicture3 = '';
              this.basisstrokepicform.expandVideo3 = '';
              this.fileExpandVideoList3 = [];
              this.basisstrokepicform.expandPicture4 = '';
              this.basisstrokepicform.expandVideo4 = '';
              this.fileExpandVideoList4 = [];
              this.basisstrokepicform.updateId = '';
              this.dialogBasisStrokePicFormVisible = false;
              this.$message({
                message: '修改成功!',
                type: 'success'
              });
            });
          }
          this.getBasisStrokesList();
        }else{
          this.$message.error('有图片未上传！');
        }
      });
    },
    //更新或添加基本笔画标题
    insertUpdateBasisStrokeTitle(){
      this.$refs["basisstroketitleform"].validate((valid) => {
        if (valid) {
          if(this.basisstroketitleform.updateId == ''){
            //插入找茬信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffcalligraphy/save"),
              method: "post",
              data: this.$http.adornParams({
                type: this.calligraphyType,
                strokesTitle: this.basisstroketitleform.strokesTitle,
                corder: this.basisstroketitleform.corder,
              }),
            }).then(({ data }) => {
              this.basisstroketitleform.strokesTitle = '';
              this.basisstroketitleform.corder = '';
              this.dialogBasisStrokeTitleFormVisible = false;
              this.$message({
                message: '添加成功!',
                type: 'success'
              });
              this.getBasisStrokesList();
            });
          }else{
            //更新找茬信息数据
            this.$http({
              url: this.$http.adornUrl("/sf/cbstiffcalligraphy/update"),
              method: "post",
              data: this.$http.adornParams({
                type: this.calligraphyType,
                strokesTitle: this.basisstroketitleform.strokesTitle,
                corder: this.basisstroketitleform.corder,
                id: this.basisstroketitleform.updateId,
              }),
            }).then(({ data }) => {
              this.basisstroketitleform.strokesTitle = '';
              this.basisstroketitleform.corder = '';
              this.basisstroketitleform.updateId = '';
              this.dialogBasisStrokeTitleFormVisible = false;
              this.$message({
                message: '修改成功!',
                type: 'success'
              });
              this.getBasisStrokesList();
            });
          }
        }else{
          this.$message.error('有图片未上传！');
        }
      });
    },
    //删除基本笔画标题
    deleteBasisStroke(id){
      this.$confirm(`确定对[基本笔画id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http({
            url: this.$http.adornUrl("/sf/cbstiffcalligraphy/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getBasisStrokesList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //修改基本笔画标题
    updateBasisStroke(id,strokesTitle,corder){
      this.basisstroketitleform.strokesTitle = strokesTitle;
      this.basisstroketitleform.corder = corder;
      this.basisstroketitleform.updateId = id;
      this.addBasisStrokesTitle();
    },
    // 删除添加基本笔画图片
    deleteBasisStrokesPic(id){
      this.$confirm(`确定对[基本笔画图片id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http({
            url: this.$http.adornUrl("/sf/cbstiffcalligraphypicture/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getBasisStrokesList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 更新添加书法基础图片信息数据
    updateBasisStrokesPic(id,strokesName,porder,calligraphyPicture,expandPicture,expandVideo,expandPicture2,expandVideo2,expandPicture3,expandVideo3,expandPicture4,expandVideo4,cid){
      this.basisstrokepicform.strokesName = strokesName;
      this.basisstrokepicform.porder = porder;
      this.basisstrokepicform.calligraphyPicture = calligraphyPicture;
      this.basisstrokepicform.expandPicture = expandPicture;
      this.basisstrokepicform.expandVideo = expandVideo;
      this.basisstrokepicform.expandPicture2 = expandPicture2;
      this.basisstrokepicform.expandVideo2 = expandVideo2;
      this.basisstrokepicform.expandPicture3 = expandPicture3;
      this.basisstrokepicform.expandVideo3 = expandVideo3;
      this.basisstrokepicform.expandPicture4 = expandPicture4;
      this.basisstrokepicform.expandVideo4 = expandVideo4;
      
      if(expandVideo != ""){
        let obj = {};
        let filenamelist = expandVideo.toString().split("/");
        obj['name'] = filenamelist[filenamelist.length-1];
        obj['url'] = expandVideo;
        this.fileExpandVideoList.push(obj); 
      }
      if(expandVideo2 != null){
        let obj = {};
        let filenamelist2 = expandVideo2.toString().split("/");
        obj['name'] = filenamelist2[filenamelist2.length-1];
        obj['url'] = expandVideo2;
        this.fileExpandVideoList2.push(obj);
      }
      if(expandVideo3 != null){
        let obj = {};
        let filenamelist3 = expandVideo3.toString().split("/");
        obj['name'] = filenamelist3[filenamelist3.length-1];
        obj['url'] = expandVideo3;
        this.fileExpandVideoList3.push(obj);
      }
      if(expandVideo4 != null){
        let obj = {};
        let filenamelist4 = expandVideo4.toString().split("/");
        obj['name'] = filenamelist4[filenamelist4.length-1];
        obj['url'] = expandVideo4;
        this.fileExpandVideoList4.push(obj);
      }
      this.basisstrokepicform.updateId = id;
      this.addBasisStrokePic(cid);
    },
    //打开基本笔画标题模态框
    addBasisStrokesTitle(){
      this.dialogBasisStrokeTitleFormVisible = true;
    },
    // 查询书法基础列表并回显
    getBasisStrokesList(){
      //查询并回显
      this.$http({
        url: this.$http.adornUrl("/sf/cbstiffcalligraphy/getInfoList"),
        method: "post",
        data: this.$http.adornParams({
          type: this.calligraphyType,
        }),
      }).then(({ data }) => {
        let calligraphyList = data.calligraphyList;
        if (calligraphyList.length > 0) {
          this.tableBasisStrokesData = [];
          for(var i in calligraphyList){
            let firstIns = {};
            firstIns['id'] = calligraphyList[i].id;
            firstIns['strokesTitle'] = calligraphyList[i].strokesTitle;
            firstIns['corder'] = calligraphyList[i].corder;
            
            let childrens = [];
            let calligraphyPictureList = calligraphyList[i].calligraphyPictures;
            for(let j in calligraphyPictureList){
              let secondIns = {};
              secondIns['id'] = calligraphyPictureList[j].id;
              secondIns['porder'] = calligraphyPictureList[j].porder;
              secondIns['strokesName'] = calligraphyPictureList[j].strokesName;
              secondIns['calligraphyPicture'] = calligraphyPictureList[j].calligraphyPicture;
              secondIns['expandPicture'] = calligraphyPictureList[j].expandPicture;
              secondIns['expandVideo'] = calligraphyPictureList[j].expandVideo;
              secondIns['expandPicture2'] = calligraphyPictureList[j].expandPicture2;
              secondIns['expandVideo2'] = calligraphyPictureList[j].expandVideo2;
              secondIns['expandPicture3'] = calligraphyPictureList[j].expandPicture3;
              secondIns['expandVideo3'] = calligraphyPictureList[j].expandVideo3;
              secondIns['expandPicture4'] = calligraphyPictureList[j].expandPicture4;
              secondIns['expandVideo4'] = calligraphyPictureList[j].expandVideo4;
              childrens.push(secondIns);
            }
            firstIns['datas'] = childrens;
            this.tableBasisStrokesData.push(firstIns);
          }
        } else {
          this.tableBasisStrokesData = [];
        }
      });
    },
    // 下拉列表选项改变事件
    calligraphyChange(){
      if(this.calligraphyType == 1){
        this.calligraphyTitle = '基本笔画';
        this.calligraphyPicTitle = '基本笔画图片信息';
      }else if(this.calligraphyType == 2){
        this.calligraphyTitle = '偏旁部首';
        this.calligraphyPicTitle = '偏旁部首图片信息';
      }else if(this.calligraphyType == 3){
        this.calligraphyTitle = '结构形式';
        this.calligraphyPicTitle = '结构形式图片信息';
      }
      this.tableBasisStrokesData = [];
      this.getBasisStrokesList();
    },
  },
};
</script>